import { html } from "lit";
import { ArgsTable, Canvas, Meta, Story } from "@storybook/addon-docs";
import { ifDefined } from "lit/directives/if-defined.js";
import { unsafeHTML } from "lit/directives/unsafe-html.js";

<Meta
  title="Components/Calendar"
  component="bl-calendar"
  argTypes={{
    type: {
      control: {
        control: 'text',
        description: 'Type of the calendar'
      }
    },
  }}
/>

export const CalendarTemplate = (args) => html`
  <bl-calendar
    type=${ifDefined(args.type)}
    min-date=${ifDefined(args.minDate)}
    max-date=${ifDefined(args.maxDate)}
    start-of-week=${ifDefined(args.startOfWeek)}
    locale=${ifDefined(args.locale)}
    value=${ifDefined(args.value)}
    disabled-dates=${ifDefined(args.disabledDates)}>${unsafeHTML(args.content)}
  </bl-calendar>`


export const Template = (args) => html`${CalendarTemplate({ ...args })}`;


# Calendar

<bl-badge icon="document">[ADR](https://github.com/Trendyol/baklava/issues/795)</bl-badge>
<bl-badge
  icon="puzzle">[Figma](https://www.figma.com/file/RrcLH0mWpIUy4vwuTlDeKN/Baklava-Design-Guide?type=design&node-id=1412-8914&mode=design&t=b0kU7tBfJQFvz2at-0)</bl-badge>
<bl-badge icon="check_fill">RTL Supported</bl-badge>

Calendar component is an **internal** component for using inside Datepicker component.

### Usage

* Calendar has three types such as **single**,**multiple** and **range**.Default calendar type is `single`.You can set calendar type by using `type` attribute.
* Calendar has **min-date** and **max-date** attributes.By entering these values,you can disable all dates before min-date property or will disable all dates after max-date property.
* Another attribute **disabled-dates** is also restrict the dates that can be selected on the calendar.
* Attribute **start-of-date** defines the days of the week, corresponding to 0 Sundays and 6 Saturdays. By entering this, you can choose from which day the calendar will create the calendar view.

## Calendar Types

### Single Type Calendar

Default calendar type is `single` and you can only select a single day from calendar.

<Canvas>
  <Story name="Single Type Calendar" args={{ type: 'single' }}>
    {Template.bind({})}
  </Story>
</Canvas>

### Multiple Type Calendar

You can select multiple days from calendar.

<Canvas>
  <Story name="Multiple Type Calendar" args={{ type: 'multiple' }}>
    {Template.bind({})}
  </Story>
</Canvas>


### Range Type Calendar

You can select date range from calendar.

<Canvas>
  <Story name="Range Type Calendar" args={{ type: 'range' }}>
    {Template.bind({})}
  </Story>
</Canvas>

### Set Value

You can set default value to calendar.

<Canvas>
  <Story name="Default Value" args={{
    type: 'single',
    value: new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate() + 2)
  }}>
    {Template.bind({})}
  </Story>
</Canvas>

### Disabled Dates

You can set dates which you want to disable from calendar.

<Canvas>
  <Story name="Disabled Dates" args={{
    type: 'single',
    disabledDates: new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate() + 2)
  }}>
    {Template.bind({})}
  </Story>
</Canvas>

## RTL Support

The calendar component supports RTL (Right-to-Left) text direction. You can enable RTL mode by setting the `dir` attribute and `lang` attribute on a parent element or the `html` tag.

<Canvas>
  <Story name="RTL Support">
    {() => html`
      <div>
        <iframe
          srcdoc="
            <html dir='rtl' lang='ar'>
              <head>
                <script type='module' src='https://cdn.jsdelivr.net/npm/@trendyol/baklava@latest/dist/baklava.js'></script>
                <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/@trendyol/baklava@latest/dist/themes/default.css'>
                <style>
                  body {
                    margin: 0;
                    padding: 24px;
                  }
                  .container {
                    display: flex;
                    gap: 32px;
                  }
                  .calendar-group {
                    display: flex;
                    flex-direction: column;
                    gap: 8px;
                  }
                  p {
                    margin: 0;
                  }
                </style>
              </head>
              <body>
                <div class='container'>
                  <div class='calendar-group'>
                    <p>التقويم الأحادي (Single Calendar)</p>
                    <bl-calendar type='single'></bl-calendar>
                  </div>

                  <div class='calendar-group'>
                    <p>تقويم متعدد (Multiple Calendar)</p>
                    <bl-calendar type='multiple'></bl-calendar>
                  </div>

                  <div class='calendar-group'>
                    <p>تقويم النطاق (Range Calendar)</p>
                    <bl-calendar type='range'></bl-calendar>
                  </div>
                </div>
              </body>
            </html>
          "
          style="border: none; width: 100%; height: 500px;"
        ></iframe>
      </div>
    `}
  </Story>
</Canvas>

Here's a vanilla JavaScript and HTML example of how to use RTL support:

```html
<!-- index.html -->
<html dir="rtl" lang="ar">
<head>
  <meta charset="UTF-8">
  <title>Calendar RTL Example</title>
  <script type="module" src="https://cdn.jsdelivr.net/npm/@trendyol/baklava@latest/dist/baklava.js"></script>
  <script type="module" src="https://cdn.jsdelivr.net/npm/@trendyol/baklava@latest/dist/localization.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@trendyol/baklava@latest/dist/themes/default.css">
</head>
<body>
  <div>
    <div>
      <h3>التقويم الأحادي</h3>
      <bl-calendar type="single"></bl-calendar>
    </div>

    <div>
      <h3>تقويم متعدد</h3>
      <bl-calendar type="multiple"></bl-calendar>
    </div>

    <div>
      <h3>تقويم النطاق</h3>
      <bl-calendar type="range"></bl-calendar>
    </div>
  </div>
</body>
</html>
```

## Reference

<ArgsTable of="bl-calendar" />
